<template>
  <fragment class="menu" v-if="!route.hidden">
    <template v-if="sigle(route) && !onlyOneChild.children">
      <el-menu-item :index="onlyOneChild.path" @click="clickMenu(onlyOneChild)">
        <i :class="onlyOneChild.meta.icon"></i>
        <span slot="title">{{ onlyOneChild.name }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-submenu :index="route.path">
        <template v-if="!route.meta" slot="title">
          <el-tag type="danger" size="mini" style="width: 33px">默认</el-tag>
          <i class="el-icon-goblet-square-full"></i>
          <span slot="title">{{ route.name }}</span>
        </template>
        <template v-else slot="title">
          <i :class="route.meta.icon"></i>
          <span slot="title">{{ route.name }}</span>
        </template>
        <Item
          v-for="(item, index) in route.children"
          :key="index"
          :route="item"
          @click="clickMenu(item)"
        />
      </el-submenu>
    </template>
  </fragment>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Item",
  props: {
    route: {
      type: Object,
      defaults: {},
    },
  },
  data() {
    return {
      onlyOneChild: null,
    };
  },
  computed: {
    ...mapState({
      sidebar: (state) => state.app.sidebar,
    }),
  },
  mounted() {},
  created() {},
  methods: {
      //  引入该方法是的点击侧边栏菜单时候将其添加到tagMENU内
    ...mapMutations({
      set_brandRoute: "brand/set_brandRoute",
    }),
    /**
     * 动态菜单方法解释
     * 首先传入菜单项
     *
     *  if(有) {  1. 判断是否有children
     *      if(子项中是否只有一个 且 这一个中是否含有meta.lowe) {
     *           满足条件
     *           onlyOneChild = children[0];
     *           return true
     *        } else {
     *             否则
     *             return false  (将进入summenu中继续渲染)
     *       }
     *    }   else {   2. 没有children（只要针对最后一级）
     *         直接
     *         if(!是否hidden) {
     *           onlyOneChild = route;
     *            return true
     *          }
     *     }
     *
     *    至此本项目中的动态菜单配置完成
     */
    /**
     * 动态菜单栏参数说明
     * @param {sigle} 表示只有一个子菜单项
     * @param {children[0].meta.lower} 若是只有一个孩子是显示父级还是显示该子级，为true显示父级,子级为二级菜单下
     */
    sigle(route) {
      let children = route.children;
      if (children) {
        if (children.length == 1 && !children[0].meta.lower) {
          this.onlyOneChild = children[0]; //使用这个孩子;并且这个孩子没有孩子的情况下
          return true;
        } else {
          return false;
        }
      } else {
        if (!route.hidden) {
          this.onlyOneChild = route; //针对最后一级没有子路由的情况下
          return true;
        }
      }
    },

    clickMenu(route) {
       this.set_brandRoute(route)
    },
  },
  activated() {},
  watch: {},
};
</script>
<style lang="scss">
@import "@/assets/scss/menu.scss";
.el-menu-item,
.el-submenu__title {
  @include common;
}
.el-submenu {
  .el-menu-item {
    @include common;
  }
}
</style>
